import { createRef, FC, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { Button } from 'antd';
import { useResizeChange } from '@src/components/resizeChange';
import { throttle } from '@src/utils';
export const RealTimeTransactionData: FC = () => {
  let typeNameMapping: any = {
    POLICY_ORDER_SUCCESS: '投保订单_落地成功',
    POLICY_ORDER_FAIL: '投保订单_落地失败',
    ENDOR_ORDER_SUCCESS: '批改订单_落地成功',
    ENDOR_ORDER_FAIL: '批改订单_落地失败',
    SUB_POLICY_SUCCESS: '小保单_落地成功',
    SUB_POLICY_FAIL: '小保单_落地失败',
    SUB_ENDOR_SUCCESS: '小批单_落地成功',
    SUB_ENDOR_FAIL: '小批单_落地失败',
  };
  const myChart: any = useRef({
    chart: null,
    option: {
      legend: {
        data: [],
      },
      xAxis: {
        data: [],
      },
      yAxis: {},
      series: [],
    },
  });
  const echartsEl: any = useRef({});
  const timer1: any = useRef(null);
  const [current, setCurrent] = useState<any>({});
  useEffect(() => {
    console.log(echartsEl.current);
    getEcharts();
    getTopInfo();
    const times = 1 * 60 * 1000;
    timer1.current = setInterval(() => {
      getEcharts();
      getTopInfo();
    }, times);
    return () => {
      clearInterval(timer1.current);
    };
  }, []);
  useResizeChange(
    throttle(() => {
      myChart.current.chart.resize();
    }, 30)
  );
  const getTopInfo = () => {
    let current: any = {};
    let res: any = { data: [] };
    res.data = [
      { transType: 'POLICY_ORDER_SUCCESS', time: null, count: 115094 },
      { transType: 'POLICY_ORDER_FAIL', time: null, count: 0 },
      { transType: 'ENDOR_ORDER_SUCCESS', time: null, count: 0 },
      { transType: 'ENDOR_ORDER_FAIL', time: null, count: 0 },
      { transType: 'SUB_POLICY_SUCCESS', time: null, count: 94053 },
      { transType: 'SUB_POLICY_FAIL', time: null, count: 0 },
      { transType: 'SUB_ENDOR_SUCCESS', time: null, count: 0 },
      { transType: 'SUB_ENDOR_FAIL', time: null, count: 0 },
    ];
    for (let i: number = 0; i < res.data.length; i++) {
      let item: any = res.data[i];
      if (item.transType === 'POLICY_ORDER_SUCCESS') {
        current.policyOrderSuccess = item.count;
      } else if (item.transType === 'POLICY_ORDER_FAIL') {
        current.policyOrderFail = item.count;
      } else if (item.transType === 'ENDOR_ORDER_SUCCESS') {
        current.endorOrderSuccess = item.count;
      } else if (item.transType === 'ENDOR_ORDER_FAIL') {
        current.endorOrderFail = item.count;
      } else if (item.transType === 'SUB_POLICY_SUCCESS') {
        current.subPolicySuccess = item.count;
      } else if (item.transType === 'SUB_POLICY_FAIL') {
        current.subPolicyFail = item.count;
      } else if (item.transType === 'SUB_ENDOR_SUCCESS') {
        current.subEndorSuccess = item.count;
      } else if (item.transType === 'SUB_ENDOR_FAIL') {
        current.subEndorFail = item.count;
      }
    }
    setCurrent(current);
  };
  const getEcharts = () => {
    myChart.current.chart?.dispose();

    myChart.current.chart = echarts.init(echartsEl.current);
    var res: any = {};
    res.data = {
      POLICY_ORDER_SUCCESS: [
        { transType: null, time: '09:06', count: 23 },
        { transType: null, time: '09:07', count: 2 },
        { transType: null, time: '09:08', count: 45 },
        { transType: null, time: '09:09', count: 6 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 89 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 3 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 50 },
        { transType: null, time: '09:48', count: 40 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 30 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 20 },
        { transType: null, time: '09:54', count: 10 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 4 },
      ],
      POLICY_ORDER_FAIL: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 34 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 5 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 66 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 23 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 4 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      ENDOR_ORDER_SUCCESS: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      ENDOR_ORDER_FAIL: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      SUB_POLICY_SUCCESS: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      SUB_POLICY_FAIL: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      SUB_ENDOR_SUCCESS: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
      SUB_ENDOR_FAIL: [
        { transType: null, time: '09:06', count: 0 },
        { transType: null, time: '09:07', count: 0 },
        { transType: null, time: '09:08', count: 0 },
        { transType: null, time: '09:09', count: 0 },
        { transType: null, time: '09:10', count: 0 },
        { transType: null, time: '09:11', count: 0 },
        { transType: null, time: '09:12', count: 0 },
        { transType: null, time: '09:13', count: 0 },
        { transType: null, time: '09:14', count: 0 },
        { transType: null, time: '09:15', count: 0 },
        { transType: null, time: '09:16', count: 0 },
        { transType: null, time: '09:17', count: 0 },
        { transType: null, time: '09:18', count: 0 },
        { transType: null, time: '09:19', count: 0 },
        { transType: null, time: '09:20', count: 0 },
        { transType: null, time: '09:21', count: 0 },
        { transType: null, time: '09:22', count: 0 },
        { transType: null, time: '09:23', count: 0 },
        { transType: null, time: '09:24', count: 0 },
        { transType: null, time: '09:25', count: 0 },
        { transType: null, time: '09:26', count: 0 },
        { transType: null, time: '09:27', count: 0 },
        { transType: null, time: '09:28', count: 0 },
        { transType: null, time: '09:29', count: 0 },
        { transType: null, time: '09:30', count: 0 },
        { transType: null, time: '09:31', count: 0 },
        { transType: null, time: '09:32', count: 0 },
        { transType: null, time: '09:33', count: 0 },
        { transType: null, time: '09:34', count: 0 },
        { transType: null, time: '09:35', count: 0 },
        { transType: null, time: '09:36', count: 0 },
        { transType: null, time: '09:37', count: 0 },
        { transType: null, time: '09:38', count: 0 },
        { transType: null, time: '09:39', count: 0 },
        { transType: null, time: '09:40', count: 0 },
        { transType: null, time: '09:41', count: 0 },
        { transType: null, time: '09:42', count: 0 },
        { transType: null, time: '09:43', count: 0 },
        { transType: null, time: '09:44', count: 0 },
        { transType: null, time: '09:45', count: 0 },
        { transType: null, time: '09:46', count: 0 },
        { transType: null, time: '09:47', count: 0 },
        { transType: null, time: '09:48', count: 0 },
        { transType: null, time: '09:49', count: 0 },
        { transType: null, time: '09:50', count: 0 },
        { transType: null, time: '09:51', count: 0 },
        { transType: null, time: '09:52', count: 0 },
        { transType: null, time: '09:53', count: 0 },
        { transType: null, time: '09:54', count: 0 },
        { transType: null, time: '09:55', count: 0 },
        { transType: null, time: '09:56', count: 0 },
        { transType: null, time: '09:57', count: 0 },
        { transType: null, time: '09:58', count: 0 },
        { transType: null, time: '09:59', count: 0 },
        { transType: null, time: '10:00', count: 0 },
        { transType: null, time: '10:01', count: 0 },
        { transType: null, time: '10:02', count: 0 },
        { transType: null, time: '10:03', count: 0 },
        { transType: null, time: '10:04', count: 0 },
        { transType: null, time: '10:05', count: 0 },
      ],
    };
    let option: any = myChart.current.option;
    for (let transType in res.data) {
      let items = res.data[transType];

      option.legend.data.push(typeNameMapping[transType]);
      if (option.xAxis.data.length === 0) {
        for (let i: number = 0; i < items.length; i++) {
          let item: any = items[i];
          option.xAxis.data.push(item.time);
        }
      }
      var counts = [];
      for (let i: number = 0; i < items.length; i++) {
        let item: any = items[i];
        counts.push(item.count);
      }
      option.series.push({
        name: typeNameMapping[transType],
        type: 'line',
        data: counts,
      });
    }
    myChart.current.chart.setOption(option);
  };
  return (
    <div className="pageBox fff">
      <div className="publicH1Box margT20 pad20">
        <h1>
          今日当前交易总数量 [
          <a onClick={getTopInfo} style={{ fontSize: '14px' }}>
            刷新
          </a>
          ]
        </h1>
        <div className="itemBox">
          <div className="item">
            <div>
              <div className="name">投保订单_落地成功:</div>
              <div className="value">{current.policyOrderSuccess}</div>
            </div>
            <div>
              <div className="name">投保订单_落地失败:</div>
              <div className="value">{current.policyOrderFail}</div>
            </div>
            <div>
              <div className="name">退保订单_落地成功:</div>
              <div className="value">{current.endorOrderSuccess}</div>
            </div>
          </div>
          <div className="item">
            <div>
              <div className="name">退保订单_落地失败:</div>
              <div className="value">{current.endorOrderFail}</div>
            </div>
            <div>
              <div className="name">小保单_落地成功:</div>
              <div className="value">{current.subPolicySuccess}</div>
            </div>
            <div>
              <div className="name">小保单_落地失败:</div>
              <div className="value">{current.subPolicyFail}</div>
            </div>
          </div>
          <div className="item">
            <div>
              <div className="name">小批单_落地成功:</div>
              <div className="value">{current.subEndorSuccess}</div>
            </div>
            <div>
              <div className="name">小批单_落地失败:</div>
              <div className="value">{current.subEndorFail}</div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div className="grayLine"></div>
      <div className="publicH1Box pad20">
        <h1>
          近一小时交易量图表[
          <a onClick={getEcharts} style={{ fontSize: '14px' }}>
            刷新
          </a>
          ]
        </h1>
        <div className="itemBox">
          <div
            ref={echartsEl}
            style={{
              width: '100%',
              height: '400px',
            }}
          ></div>
        </div>
      </div>
    </div>
  );
};
